<template>
	<view class="hospital-page">
		<!-- 页面标题 -->
		<u-navbar title="阳光综合医院" bg-color="#2c6ecb" title-color="#ffffff" left-icon-color="#ffffff"></u-navbar>

		<!-- 富文本内容容器 -->
		<view class="content-container">
			<u-parse :html="hospitalContent"></u-parse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hospitalContent: `
        <div class="hospital-header">
          <img src="https://picsum.photos/750/300" alt="赛博医馆外观" style="width:100%;border-radius:12rpx;" />
          <h1 style="text-align:center;margin:30rpx 0;color:#2c6ecb;font-size:44rpx;">赛博医馆</h1>
          <div style="display:flex;justify-content:center;margin-bottom:30rpx;">
            <span style="background:#e8f3ff;color:#2c6ecb;padding:8rpx 20rpx;border-radius:20rpx;margin-right:15rpx;">三级甲等医院</span>
            <span style="background:#f0f7ff;color:#1e88e5;padding:8rpx 20rpx;border-radius:20rpx;">综合性医院</span>
          </div>
        </div>

        <div class="hospital-intro" style="margin-bottom:40rpx;">
          <h2 style="color:#333;font-size:36rpx;margin:25rpx 0;padding-left:15rpx;border-left:4rpx solid #2c6ecb;">医院简介</h2>
          <p style="line-height:1.8;color:#666;margin-bottom:20rpx;">阳光综合医院创建于1956年，是一所集医疗、教学、科研、预防保健为一体的三级甲等综合性医院。医院占地面积86亩，建筑面积15万平方米，开放床位1200张。</p>
          <p style="line-height:1.8;color:#666;margin-bottom:20rpx;">医院始终坚持"以患者为中心"的服务理念，不断提升医疗服务质量，先后荣获"全国百姓放心示范医院"、"全国医疗服务先进集体"等荣誉称号。</p>
        </div>

        <div class="departments" style="margin-bottom:40rpx;">
          <h2 style="color:#333;font-size:36rpx;margin:25rpx 0;padding-left:15rpx;border-left:4rpx solid #2c6ecb;">特色科室</h2>
          <ul style="padding-left:30rpx;margin-bottom:20rpx;">
            <li style="margin-bottom:15rpx;line-height:1.8;color:#666;"><strong style="color:#333;">心血管内科</strong>：国家级临床重点专科，拥有先进的心脏介入治疗中心</li>
            <li style="margin-bottom:15rpx;line-height:1.8;color:#666;"><strong style="color:#333;">神经外科</strong>：在颅脑损伤、脑血管疾病治疗方面处于区域领先水平</li>
            <li style="margin-bottom:15rpx;line-height:1.8;color:#666;"><strong style="color:#333;">骨科</strong>：开展各类关节置换、脊柱外科手术，技术力量雄厚</li>
            <li style="margin-bottom:15rpx;line-height:1.8;color:#666;"><strong style="color:#333;">妇产科</strong>：省级重点专科，拥有一流的产科服务和妇科微创手术中心</li>
          </ul>
        </div>

        <div class="equipment" style="margin-bottom:40rpx;">
          <h2 style="color:#333;font-size:36rpx;margin:25rpx 0;padding-left:15rpx;border-left:4rpx solid #2c6ecb;">先进设备</h2>
          <div style="display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:20rpx;">
            <img src="https://picsum.photos/350/200" alt="CT设备" style="width:48%;border-radius:8rpx;margin-bottom:15rpx;" />
            <img src="https://picsum.photos/350/200?2" alt="核磁共振设备" style="width:48%;border-radius:8rpx;margin-bottom:15rpx;" />
          </div>
          <p style="line-height:1.8;color:#666;">医院拥有国际先进的医疗设备，包括3.0T核磁共振、64排螺旋CT、DSA血管造影机、直线加速器等大型设备，为精准诊断和有效治疗提供了坚实保障。</p>
        </div>

        <div class="medical-team" style="margin-bottom:40rpx;">
          <h2 style="color:#333;font-size:36rpx;margin:25rpx 0;padding-left:15rpx;border-left:4rpx solid #2c6ecb;">医疗团队</h2>
          <p style="line-height:1.8;color:#666;margin-bottom:20rpx;">医院现有职工2300余人，其中高级职称人员356人，博士、硕士研究生导师42人，享受国务院特殊津贴专家15人。形成了一支结构合理、技术精湛的医疗队伍。</p>
        </div>

        <div class="contact" style="margin-bottom:40rpx;padding:25rpx;background:#f5f7fa;border-radius:12rpx;">
          <h2 style="color:#333;font-size:36rpx;margin:15rpx 0;">联系方式</h2>
          <p style="line-height:1.8;color:#666;margin-bottom:10rpx;"><strong style="color:#333;">地址：</strong>健康路88号阳光医疗园区</p>
          <p style="line-height:1.8;color:#666;margin-bottom:10rpx;"><strong style="color:#333;">咨询电话：</strong>400-888-9999</p>
          <p style="line-height:1.8;color:#666;margin-bottom:10rpx;"><strong style="color:#333;">门诊时间：</strong>周一至周五 8:00-17:30 周六至周日 8:00-12:00</p>
        </div>
      `
			};
		}
	};
</script>

<style lang="scss" scoped>
	.content-container {
		padding: 25rpx;
		background-color: #ffffff;
		min-height: calc(100vh - 88rpx);
	}

	/* 解决u-parse中标签样式穿透问题 */
	::v-deep .u-parse {

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin-top: 1em;
			margin-bottom: 0.5em;
		}

		p {
			margin-bottom: 1em;
			color: #666666;
		}

		img {
			display: block;
			margin: 0 auto 1em;
			max-width: 100%;
			height: auto;
		}

		ul,
		ol {
			margin-left: 1.5em;
			margin-bottom: 1em;
		}

		li {
			margin-bottom: 0.5em;
		}

		strong {
			color: #333333;
		}
	}
</style>